<template>
  <div class="play-list-item" :style="{color:(store.state.playList[store.state.currentIndex].id === songInfo.id ? 'red' : 'black')}">
      
      <div class="play-list-item-select-icon" >

           <i class="fa fa-play" style="font-size:10px" v-show="(store.state.playList[store.state.currentIndex].id === songInfo.id)&&(store.state.isPlay)"></i>
           <i class="fa fa-stop" style="font-size:10px" v-show="(store.state.playList[store.state.currentIndex].id === songInfo.id)&&(!store.state.isPlay)"></i>
      </div>
      <div class="play-list-item-song-name">
          <span>{{songInfo.name}}</span>
      </div>
      <div class="play-list-item-song-author">
           <span>{{songInfo.artists[0].name}}</span>
      </div>
    
   
    <el-icon @click="removeSong(songInfo.id)">
      <Close></Close>
    </el-icon>
  </div>
</template>

<script lang='ts'>
import { defineComponent, computed } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  setup() {

    const store = useStore();

     const state = computed(() => {
      // 使用计算属性来监听Vuex数据的变化
      return store.state;
    });
    const removeSong = (id)=>{
        console.log("移除歌曲",id);
        
        store.dispatch("removeSong",id)
    }
    return {
        removeSong,
        state,
        store
    };
  },
  props: {
      songInfo:{
          type:Object
      }
  }
});
</script>
 
<style lang = "scss" scoped>
@import "../../assets/css/player.scss";
</style>